<script setup>
import { ref, onMounted } from 'vue';

// 模拟新闻数据
const newsItems = ref([
  {
    id: 1,
    title: '央行宣布降准0.5个百分点，释放长期资金约1万亿元',
    source: '央视财经',
    time: '10分钟前',
    impact: 'positive',
    summary: '中国人民银行宣布下调金融机构存款准备金率0.5个百分点，预计将释放长期资金约1万亿元，有利于增强金融对实体经济的支持力度。'
  },
  {
    id: 2,
    title: '两市成交额突破1.2万亿，创近三个月新高',
    source: '证券时报',
    time: '30分钟前',
    impact: 'positive',
    summary: '沪深两市今日成交额突破1.2万亿元，创近三个月新高，市场活跃度明显提升，北向资金净流入超过50亿元。'
  },
  {
    id: 3,
    title: '美联储主席暗示年内可能开始降息',
    source: '华尔街日报',
    time: '2小时前',
    impact: 'positive',
    summary: '美联储主席鲍威尔在最新讲话中暗示，如果通胀继续降温，美联储可能会在年内开始降息，这一表态提振了全球市场情绪。'
  },
  {
    id: 4,
    title: '某大型科技公司季度财报不及预期',
    source: '财经网',
    time: '3小时前',
    impact: 'negative',
    summary: '某科技巨头发布的第二季度财报显示，营收增长放缓，净利润同比下滑15%，不及市场预期，股价盘后大跌6%。'
  },
  {
    id: 5,
    title: '国家发改委：将进一步扩大内需，促进消费升级',
    source: '新华社',
    time: '5小时前',
    impact: 'positive',
    summary: '国家发改委表示将出台一系列措施扩大内需，促进消费升级，包括加大对新能源汽车、智能家电等领域的支持力度。'
  }
]);

const impactClass = (impact) => {
  return {
    'positive': 'bg-red-100 text-red-800',
    'negative': 'bg-green-100 text-green-800',
    'neutral': 'bg-gray-100 text-gray-800'
  }[impact] || 'bg-gray-100 text-gray-800';
};

const impactText = (impact) => {
  return {
    'positive': '利好',
    'negative': '利空',
    'neutral': '中性'
  }[impact] || '中性';
};
</script>

<template>
  <div class="market-news">
    <h3 class="text-lg font-semibold mb-4">市场快讯</h3>
    
    <div class="space-y-4">
      <div 
        v-for="news in newsItems" 
        :key="news.id"
        class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-shadow"
      >
        <div class="flex justify-between items-start">
          <h4 class="font-medium text-gray-900 mb-1">{{ news.title }}</h4>
          <span :class="['px-2 py-1 rounded-full text-xs font-medium', impactClass(news.impact)]">
            {{ impactText(news.impact) }}
          </span>
        </div>
        
        <p class="text-sm text-gray-600 mb-2">{{ news.summary }}</p>
        
        <div class="flex justify-between items-center text-xs text-gray-500">
          <span>{{ news.source }}</span>
          <span>{{ news.time }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.market-news {
  max-height: 100%;
  overflow-y: auto;
}

/* 自定义滚动条样式 */
.market-news::-webkit-scrollbar {
  width: 4px;
}

.market-news::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.market-news::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 2px;
}

.market-news::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>